<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/company-2.png" id="img"/>
		<canvas id="canvas" width="600" height="600">
			
		</canvas>
		<button type="button" onclick="" id="btn1">x重复</button>
		<button type="button" onclick="" id="btn2">y重复</button>
		<button type="button" onclick="" id="btn3">x-y重复</button>
		<button type="button" onclick="" id="btn4">clear重复</button>
	</body>
	<script type="text/javascript">
		var img = document.getElementById("img");
		
		document.getElementById("btn1").onclick = function(){
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			var pattern = context.createPattern(img,"repeat-x");
			context.fillStyle = pattern;
			context.fillRect(0,0,600,300);
		}
	</script>
</html>
